
<template>
  <view class="container">
<!--    <view class="tab-box">-->
<!--      <u-tabs-->
<!--          :list="tabsList"-->
<!--          @change="tabsClick"-->
<!--          :current="current"-->
<!--          lineColor="#0962c4"-->
<!--          :activeStyle="{-->
<!--          color: '#333333',-->
<!--          fontWeight: 'bold',-->
<!--          fontSize: '36rpx'-->
<!--        }"-->
<!--          :inactiveStyle="{-->
<!--          color: '#333333',-->
<!--          fontWeight: 'normal',-->
<!--          fontSize: '36rpx'-->
<!--        }"-->
<!--          bgColor="transparent"-->
<!--      ></u-tabs>-->
<!--    </view>-->
    <view class="search-box">
      <u-search
          @search="getList(true)"
          bg-color="#fff" :show-action="false" placeholder="请输入商品名称查询" v-model="keyword"></u-search>
    </view>
<!--    <view class="grid-box">-->
<!--      <view class="drop-item" @click="openPopup('dialogCategory')">-->
<!--        {{ searchParams.category_name || '全部分类'}}-->
<!--        <view class="sort-icon" >-->
<!--          <u-icon name="arrow-down" size="14" :color="searchParams.category_name ? '#0962c4' :'#666'"></u-icon>-->
<!--        </view>-->
<!--      </view>-->
<!--      <view class="drop-item" @click="openPopup('dialogProvince')">-->
<!--        {{ searchParams.province ? searchParams.province + searchParams.city : '全部省市'}}-->
<!--        <view class="sort-icon" >-->
<!--          <u-icon name="arrow-down" size="14" :color="searchParams.province ? '#0962c4' :'#666'"></u-icon>-->
<!--        </view>-->
<!--      </view>-->
<!--      <view class="drop-item" @click="changeSort">-->
<!--        申请时间-->
<!--        <view class="sort-icon" >-->
<!--          <u-icon name="arrow-up-fill" size="14" :color="searchParams.createTimeSort === 'asc' ? '#0962c4' :'#666'"></u-icon>-->
<!--          <u-icon name="arrow-down-fill" size="14" :color="searchParams.createTimeSort === 'desc' ? '#0962c4' :'#666'"></u-icon>-->
<!--        </view>-->
<!--      </view>-->
<!--    </view>-->
    <!-- 房源推荐 -->
    <view class="recommend-box">
      <scroll-view
          scroll-y="true"
          @scrolltolower="onScroll"
          refresher-enabled
          :refresher-triggered="isRefreshing"
          @refresherrefresh="onRefresh"
          style="height: 100%"
      >
        <ItemDetail style="margin: 13px 0" :item="item" v-for="(item, index) in dataList" :key="index" ></ItemDetail>
        <u-loadmore v-if="dataList.length" :status="loading" />
        <div style="height: 40px"></div>
        <u-empty  v-if="dataList.length === 0" mode="list"></u-empty>
      </scroll-view>
    </view>


    <u-popup mode="bottom" v-model="dialogCategory" border-radius="24">
      <view class="popup-content" >
        <view class="popup-header">
          <text class="cancel-btn" @click="handleClose('dialogCategory')">取消</text>
          <text class="title">选择分类</text>
          <text class="confirm-btn" @click="handleConfirm('dialogCategory')">确定</text>
        </view>
        <view class="category-container">
          <scroll-view class="primary-category" scroll-y>
            <view
                v-for="(item, index) in primaryList"
                :key="index"
                :class="['primary-item', { active: searchParams.main_category_id === item.id }]"
                @click="handlePrimarySelect(item)"
            >
              <view class="active-bar" v-if="searchParams.main_category_id === item.id"></view>
              <text>{{ item.name }}</text>
            </view>
          </scroll-view>
          <scroll-view class="secondary-category" scroll-y>
            <view class="secondary-grid">
              <view
                  v-for="(item, index) in currentSecondaryList"
                  :key="index"
                  :class="['secondary-item', { selected: searchParams.category_id === item.id }]"
                  @click="handleSecondarySelect(item)"
              >
                <view class="icon-wrapper">
                  <image :src="item.icon" style="width: 80%;height: 80%"></image>
                </view>
                <text class="name">{{ item.name }}</text>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </u-popup>
    <u-popup mode="bottom" v-model="dialogProvince" border-radius="24">
      <view class="popup-content" >
        <view class="popup-header">
          <text class="cancel-btn" @click="handleClose('dialogProvince')">取消</text>
          <text class="title">选择省市</text>
          <text class="confirm-btn" @click="handleConfirm('dialogProvince')">确定</text>
        </view>
        <view class="category-container">
          <scroll-view class="primary-category" scroll-y>
            <view
                v-for="(item, index) in primaryList2"
                :key="index"
                :class="['primary-item', { active: searchParams.province === item.name }]"
                @click="handlePrimarySelect(item)"
            >
              <view class="active-bar" v-if="searchParams.province === item.name"></view>
              <text>{{ item.name }}</text>
            </view>
          </scroll-view>
          <scroll-view class="secondary-category" scroll-y>
            <view class="secondary-grid city">
              <view
                  v-for="(item, index) in currentSecondaryList2"
                  :key="index"
                  :class="['secondary-item city', { selected: searchParams.city === item.name }]"
                  @click="handleSecondarySelect(item)"
              >
                <text class="name">{{ item.name }}</text>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import Navbar from "../../../components/navbar.vue";
import ItemDetail from "./itemDetail.vue";
import { mapGetters } from 'vuex'
export default {
  name: "index",
  computed: {
    ...mapGetters(["userInfo"]),
  },
  components: {
    ItemDetail,
    Navbar,
  },
  data() {
    return {
      gridList: [

      ],
      bannerList: [
      ],
      tabsList: [
        { name: '设备', value: '设备' },
        { name: '物资', value: '物资' }
      ],
      current: 0,
      dataList: [],
      loading: 'loading',
      pageNo: 1,
      total: 0,
      isRefreshing: false,
      keyword: '',
      searchParams: {
        main_category_id: '',
        category_id: '',
        category_name: '',
        createTimeSort: '',
        province: '',
        city: ''
      },
      dialogCategory: false,
      dialogProvince: false,
      primaryList: [],
      currentSecondaryList: [],
      primaryList2: [
      ],
      currentSecondaryList2: [
      ]
    }
  },
  methods: {
    handlePrimarySelect(item) {
      this.searchParams.main_category_id = item.id
      this.currentSecondaryList = item.children
    },
    handleSecondarySelect(item) {
      if (item.id === this.searchParams.category_id) {
        this.searchParams.category_id = ''
        this.searchParams.category_name = ''
      } else {
        this.searchParams.category_id = item.id
        this.searchParams.category_name = item.name
      }
    },
    handleClose(key) {
      this[key] = false
    },
    handleConfirm(key) {
      this.getList(true)
      this[key] = false
    },
    changeSort() {
      if (this.searchParams.createTimeSort === 'asc') {
        this.searchParams.createTimeSort = 'desc'
      } else if (this.searchParams.createTimeSort === 'desc') {
        this.searchParams.createTimeSort = ''
      } else {
        this.searchParams.createTimeSort = 'asc'
      }
      console.log(this.searchParams.createTimeSort)
    },
    openPopup(key) {
      this[key] = true
    },
    closeDropdown() {
      this.$refs.uDropdown.close();
    },
    tabsClick(index) {
      console.log('Tab clicked:', index)
      this.current = index;
      // TODO: Add logic to load different content based on selected tab
      this.getList(true)
    },
    toPage(item) {
      console.log(item)
      uni.navigateTo({
        url: item.url
      })
    },

    async getList(reset = false) {
      if (reset) {
        this.pageNo = 1
        this.dataList = []
      } else {
        if (this.loading === 'nomore') return
      }
      this.loading = 'loading'
      try {
        uni.showLoading({
          title: '加载中...'
        })
        // 构建查询参数
        const params = {
          pageNum: this.pageNo,
          pageSize: 10,
          // type: this.tabsList[this.current].value,
          approve_user_id: this.userInfo.id,
          name: this.keyword
        }

        // 添加分类筛选条件
        if (this.searchParams.category_id) {
          params.category_id = this.searchParams.category_id
        }

        // 添加省市筛选条件
        if (this.searchParams.province) {
          params.province = this.searchParams.province
        }
        if (this.searchParams.city) {
          params.city = this.searchParams.city
        }

        // 添加时间排序条件
        if (this.searchParams.createTimeSort) {
          params.createTimeSort = this.searchParams.createTimeSort
        }

        const res = await this.$api.getMyApply(params)
        let { rows, count } = res
        this.total = count || 0
        if (reset) {
          this.dataList = rows || []
        } else {
          this.dataList = [...this.dataList, ...(rows || [])]
        }

        this.pageNo++
        this.loading = this.dataList.length >= this.total ? 'nomore' : 'loadmore'
        uni.hideLoading()
      } catch (e) {
        console.log(e)
        this.loading = 'loadmore'
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      }
    },
    // 下拉刷新
    async onRefresh() {
      if (this.isRefreshing) return
      this.isRefreshing = true

      try {
        await this.getList(true)
        uni.showToast({
          title: '刷新成功',
          icon: 'none'
        })
      } catch (e) {
        uni.showToast({
          title: '刷新失败',
          icon: 'none'
        })
      } finally {
        this.isRefreshing = false
      }
    },

    // 上拉加载更多
    onScroll() {
      if (this.loading === 'loading') return
      this.getList()
    },
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.getList()
  },
  // 分享
  onShareAppMessage() {
    return {
      title: '城通物享 CT Link',
      path: '/pages/resource/index'
    }
  },
  onShow() {
    this.getList(true)
  },
  onLoad() {
    this.$api.getWxBannerList().then(res => {
      this.bannerList = res
    })

    this.$api.getCategoryTree({
      type: this.tabsList[this.current].value
    }).then(res => {
      this.primaryList = res || []
    }).catch(err => {
      console.error('获取分类失败', err)
      uni.showToast({
        title: '获取分类失败',
        icon: 'none'
      })
    })
    this.$api.getCityList().then(res => {
      this.primaryList2 = res || []
    }).catch(err => {
      console.error('获取分类失败', err)
      uni.showToast({
        title: '获取分类失败',
        icon: 'none'
      })
    })
  }
}
</script>

<style>
.popup-content {
  background-color: #ffffff;
  height: 70%;
  position: relative;
}

.popup-header {
  height: 96rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  border-bottom: 1px solid #f5f5f5;
}

.cancel-btn {
  font-size: 14px;
  color: #666666;
}

.title {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
}

.confirm-btn {
  font-size: 14px;
  color: #0962c4;
}

.category-container {
  display: flex;
  height: calc(100% - 136rpx);
}

.primary-category {
  width: 30%;
  background-color: #f8f8f8;
  overflow: auto;
}

.primary-item {
  height: 96rpx;
  display: flex;
  align-items: center;
  padding-left: 32rpx;
  position: relative;
}

.primary-item.active {
  background-color: #ffffff;
}

.active-bar {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6rpx;
  height: 32rpx;
  background-color: #0962c4;
  border-radius: 3rpx;
}

.secondary-category {
  flex: 1;
  overflow: auto;
}

.secondary-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 32rpx;
}
.secondary-grid.city {
  display: block;
  flex-wrap: nowrap;
  padding: 32rpx;
}
.secondary-item {
  width: calc(33.33% - 32rpx);
  margin: 0 16rpx 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.secondary-item.city {
  width: 100%;
  height: 96rpx;
  flex-direction: row;
  padding: 0 32rpx;
  margin: 0;
  margin-bottom: 16rpx;
  border-radius: 18rpx;
}

.icon-wrapper {
  width: 112rpx;
  height: 112rpx;
  border-radius: 16rpx;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16rpx;
}

.secondary-item.selected .icon-wrapper {
  background-color: #e3f2fd;
  border: 2rpx solid #0962c4;
}
.secondary-item.selected .name {
  color: #0962c4;
}
.secondary-item.city.selected {
  background-color: #e3f2fd;
}
.name {
  font-size: 14px;
  color: #333333;
  width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.popup-content {
  padding: 24rpx;
}
.category-container {
  display: flex;
  height: 600rpx;
  border-bottom: 1px solid #DCDCDC;
}
.confirm-btn {
  font-size: 28rpx;
  color: #0962c4;
}
page {
   height: 100%;
   overflow: auto;
 }
.recommend-box {
  flex-grow: 1;
  overflow: hidden;
}
.container {
  min-height: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background-color: #F1F3F6;
}

.search-box {
  display: flex;
  align-items: center;
  height: 72rpx;
  background-color: #FFFFFF;
  border-radius: 36rpx;
  padding: 0 24rpx;
  margin: 24rpx 0;
}

.placeholder {
  margin-left: 16rpx;
  font-size: 14px;
  color: #999999;
}

.banner-box {
  width: 100%;
  height: 280rpx;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 24rpx;
}

.banner-image {
  width: 100%;
  height: 100%;
}

.banner-content {
  position: absolute;
  top: 48rpx;
  left: 48rpx;
  color: #FFFFFF;
}

.banner-title {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 16rpx;
  display: block;
}

.banner-subtitle {
  font-size: 14px;
  margin-bottom: 24rpx;
  display: block;
}

.banner-button {
  display: inline-block;
  padding: 12rpx 32rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 24rpx;
  font-size: 14px;
}

.news-box {
  display: flex;
  align-items: center;
  padding:12rpx 0;
  border-radius: 12rpx;
}

.news-swiper {
  flex: 1;
  height: 40rpx;
}

.news-text {
  margin-left: 16rpx;
  font-size: 14px;
  color: #666666;
  line-height: 40rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.grid-box {
  display: flex;
  background-color: #F7F8FA;
  border-radius: 12rpx;
  padding: 24rpx;
}
.drop-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.sort-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 12rpx;
}

.grid-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24rpx;
}

.grid-icon {
  width: 92rpx;
  height: 92rpx;
}

.grid-text {
  font-size: 26rpx;
  color: #333333;
}

.tab-box {
  display: flex;
}

.tab-item {
  font-size: 16px;
  color: #999999;
  margin-right: 48rpx;
}

.tab-item.active {
  color: #333333;
  font-weight: bold;
  position: relative;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -8rpx;
  left: 0;
  width: 100%;
  height: 4rpx;
  background-color: #1890FF;
  border-radius: 2rpx;
}
.house-item {
  background-color: #FFFFFF;
  border-radius: 12rpx;
  padding: 20rpx 18rpx 12rpx 18rpx;
  margin-bottom: 24rpx;
  display: flex;
}

.house-image {
  width: 240rpx;
  height: 180rpx;
  border-radius: 12rpx;
  margin-right: 32rpx;
  flex-shrink: 0;
}

.house-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.house-title {
  font-size: 32rpx;
  color: #333333;
  font-weight: bold;
  margin-bottom: 12rpx;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.house-detail {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

.location, .area, .type {
  font-size: 14px;
  color: #666666;
}
.line {
  height: 20rpx;
  width: 2rpx;
  background-color: #DCDCDC;
  margin: 0 24rpx;
}
.house-price {
  display: flex;
  align-items: baseline;
}

.price {
  font-size: 20px;
  color: #FF6B6B;
  font-weight: bold;
}

.unit {
  font-size: 14px;
  color: #FF6B6B;
  margin-left: 4rpx;
}

.unit-price {
  font-size: 14px;
  color: #999999;
}

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #FFFFFF;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #EEEEEE;
}

.tab-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tab-bar-item text {
  font-size: 12px;
  color: #999999;
  margin-top: 4rpx;
}

.tab-bar-item.active text {
  color: #1890FF;
}
</style>
